<template>
	<view class="share-all">
		<view class="share-top"></view>
		<view class="share-warp">
			<view class="warp-top">
				<view class="wtop-left">
					<view class="wtop-left-title">{{detail.socketName}}</view>
					<view class="wtop-left-no">设备编号：{{detail.socketCode}}</view>
				</view>
				<view class="wtop-right">
					<image alt="" src="../../../static/icon-charge.png" ></image>
				</view>
			</view>
			<view  class="warp-box">
				<view v-if="records.length > 0" class="box-in">
					<scroll-view
					   scroll-y="true" 
					   class="scroll-view" 
					   scroll-with-animation="true" 
					   @scrolltolower="scrollDown"
					   refresher-enabled="true"
					   :refresher-triggered="triggered"
					   @refresherrefresh="onRefresh"
					>   
						<view class="box-cell" v-for="(item,index) in records" :key="item.phone">
							<view class="cell-left">
								<view class="cell-left-index">{{(index + 1)}}</view>
								<view class="cell-left-no">{{item.phone}}</view>
							</view>
							<view @click="onDelCell(item)" class="cell-btn">删除</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="records.length == 0" class="empty-box">
					<image alt="" src="../../../static/emptyData.png" class="empty-img"></image>
					<view>充电桩暂未共享给他人</view>
				</view>
			</view>
			

			
			<view class="warp-btn">
				<u-button type="primary" @click="open" text="添加共享人员"></u-button>
			</view>
			<u-popup :show="show" @close="closeBtn" @open="open" round="10">
				<view  class="all-popup">
					<view class="title">
						<image @tap="closeBtn" src="../../../static/close.png" mode=""></image>
						添加共享人员
					</view>
					<view class="title-tip">
						输入要分享的用户手机号
					</view>
					<view class="title-input">
						
						<!-- <input class="input" v-model="phone" type="number"  @input = "input" maxlength="11" placeholder="请输入对方的手机号"></input> -->
						<u--input
						  placeholder="请输入对方的手机号"
						  border="surround"
						  v-model="phone"
						  type="number" 
						  maxlength="11" 
						   @input = "input"
						></u--input>
					</view>
					<view class="title-btn">
						 <u-button type="primary"  @click="confirm">确认</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		
		<u-modal :show="showModal" @confirm="onConfirm" @cancel="onCancel" showCancelButton="true" cancelText="取消" title="提示" :content='content'></u-modal>
		
	</view>
</template>

<script>
	import {shareList, deleteShareMember, shareEquipment, socketDetail} from "./indexServ.js"
	export default {
		name: 'shareCharge',
		data() {
			return {
				show: false,
				pageIndex: 1,
				pageSize: 20,
				finished: false,
				loadText: '',
				socketCode: "",
				phone: '',
				records: [],
				showModal: false,
				content: "您是否要删除该用户？删除后，该用户将不能使用此台家充桩充电？",
				cellItem: {},
				detail: {},
				triggered: false
			}
		},
		onLoad(option) {
			this.socketCode = option.socketCode
			this.postSocketDetail()
			this.initLoad()
		},
		methods: {
			initLoad() {
				this.finished = false
				this.pageIndex = 1
				this.postShareList()
			},
			onRefresh() {
				this.triggered = true
				this.initLoad()
			},
			closeBtn() {
				this.show = false
			},
			confirm() {
				this.postShareEquipment()
			},
			open() {
				this.show = true
			},
			onDelCell(item) {
				console.log("---onDelCell-")
				console.log(item)
				this.showModal = true
				this.cellItem = item
			},
			onConfirm() {
				if(this.cellItem.id){	
					this.postDeleteShareMember(this.cellItem.id)
				}
			},
			onCancel(){
				this.showModal = false
			},
			input(e){
				const reg = /^[1-9]\d*$/;
				if(reg.test(e.detail.value)){
					this.phone = e.detail.value
				}else{
					const str = e.detail.value.substr(0, e.detail.value.length - 1);
					setTimeout(()=>{
						this.phone = str
					},0)
				}
			},
			scrollDown(e) {
				if (this.finished) {
					this.loadText = '已经到底了!'
				} else {
					this.postShareList()
				}
			},
			// 共享用户列表
			async postShareList() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				await shareList({pageSize: this.pageSize, pageIndex: this.pageIndex, socketCode: this.socketCode }).then((res) => {
					uni.hideLoading()
					const { code, body, message } = res
					if (code === '0000000') {
						this.triggered = false
						this.pageIndex++
						if (body.currentPage === '1') {
						    this.records = body.records
						} else {
						    this.records.push(...body.records)
						}
						if (parseInt(body.currentPage) >= parseInt(body.totalPage)) {
						    this.finished = true
						}
						return
					}
					this.$u.toast(message)
				}).catch(() => {
					this.$u.toast('接口返回异常')
				})
			},
			// 添加共享人
			async postShareEquipment() {
				let res = await shareEquipment({
					socketCode: this.socketCode,
					phone: this.phone
				});
				const { code, message } = res
				if(code === "0000000") {
					this.$u.toast(message)
					this.pageIndex = 1
					this.phone = ''
					this.postShareList()
					this.show = false
				}else {
					this.$u.toast(message)
				}
			},
			// 删除共享人
			async postDeleteShareMember(id) {
				let res = await deleteShareMember({
					id: id,
				});
				const { code, message } = res
				if(code === "0000000") {
					this.$u.toast("删除成功")
					this.pageIndex = 1
					this.postShareList()
					this.showModal = false
				}else {
					this.$u.toast(message)
				}
			},
			// 详情
			async postSocketDetail() {
				let res = await socketDetail({
					socketCode: this.socketCode,
				});
				const { code, body, message } = res
				if(code === "0000000") {
					this.detail = body
				}else {
					this.$u.toast(message)
				}
			},			
			
			
			
			toDetail() {
				uni.navigateTo({
					url: '/pages/chargeList/chargeDetail/index'
				});
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.share-all{
		width: 100%;
		height: 100vh;
		background: #F5F5F5;
		position: relative;		
		.share-top{
			width: 375*2rpx;
			height: 148*2rpx;
			background: linear-gradient(180deg, #E6FFF2 0%, #F5F5F5 100%);
		}
		.share-warp{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			.warp-top{
				width: 100%;
				height: 88*2rpx;
				display: flex;
				padding: 0 20*2rpx;
				box-sizing: border-box;
				.wtop-left{
					flex: 1;
					height: 88*2rpx;
					.wtop-left-title{
						font-size: 20*2rpx;
						font-weight: 550;
						margin: 24*2rpx 0 4*2rpx;
					}
					.wtop-left-no{
						font-size: 14*2rpx;
					}
				}
				.wtop-right{
					width: 88*2rpx;
					height: 88*2rpx;
					image{
						width: 100*2rpx;
						height: 88*2rpx;
					}
				}
			}
			.warp-box{
				width: 100%;
				padding: 0 20*2rpx;
				box-sizing: border-box;
				height: calc(100vh - 152*2rpx);
				// background: pink;
				overflow: auto;
				.scroll-view {
					width: 100%;
					height: calc(100vh - 152*2rpx);
					overflow:scroll;
				}
				.box-in{
					width: 100%;
					margin: 0 auto;
					font-size: 40*2rpx;
					.box-cell{
						width: 100%;
						height: 52*2rpx;
						border-radius: 8*2rpx;
						margin-bottom: 8*2rpx;
						background: #fff;
						padding: 12*2rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.cell-left{
							flex: 1;
							display: flex;
							align-items: center;
							.cell-left-index{
								font-size: 13*2rpx;
								min-width: 18*2rpx;
								height: 18*2rpx;
								border-radius: 9*2rpx;
								margin-right: 8*2rpx;
								background: #EEEEEE;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #666666;
							}
							.cell-left-no{
								font-size: 16*2rpx;
								color: #333333;
							}
						}
						.cell-btn{
							width: 50*2rpx;
							height: 24*2rpx;
							border-radius: 12*2rpx;
							font-size: 13*2rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 1*2rpx solid #E2E2E2;
							color: #666666;
						}

					}
				}
				.empty-box {
					text-align: center;
					.empty-img {
						width: 160*2rpx;
						height: 160*2rpx;
						margin-top: 20%;
						margin-bottom: 12*2rpx;
					}
					.empty-add-btn {
						width: 200*2rpx;
						height: 52*2rpx;
						line-height: 52*2rpx;
						background: #1A8DFF;
						border-radius: 26*2rpx;
						font-size: 18*2rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin: 20*2rpx auto 0 auto;
					}
				}
			}
		
			.warp-btn{
				width: 100%;
				height: 60*2rpx;
				background: #fff;
				padding: 10*2rpx 12*2rpx;
				box-sizing: border-box;
			}
		}
		.all-popup{
			width: 100%;
			height: 320*2rpx;
			position: relative;
			.title{
				width: 100%;
				height: 44*2rpx;
				text-align: center;
				line-height: 44*2rpx;
				border-bottom: 1*2rpx solid #EEEEEE;
				padding: 0 12*2rpx;
				box-sizing: border-box;
				position: relative;
				image{
					width: 20*2rpx;
					height: 20*2rpx;
					position: absolute;
					left: 10*2rpx;
					top: 11*2rpx;
				}
			}
			.title-tip{
				color: #333333;
				width: 100%;
				height: 45*2rpx;
				line-height: 45*2rpx;
				padding: 0 12*2rpx;
				box-sizing: border-box;
				font-weight: 550;
				font-size: 16*2rpx;
			}
			.title-input{
				padding: 0 12*2rpx;
				box-sizing: border-box;
			}
			.title-btn{
				padding: 0 12*2rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				width: 100%;
				bottom: 12*2rpx;
			}
		}

	}
</style>